<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>转换</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/fonts.css">
</head>

<body>
    <!-- 头部 -->
    <div class="css-head">
        <header class="css-header clearfix">
            <a href="javascript:" class="css-ease">转换</a>
            <div class="nav-information">
                <nav class="nav-infor clearfix">
                    <ul class="introduction">
                        <li class="personer"><a href="javascript:">关于我</a></li>
                        <li class="personer"><a href="javascript:">Gitee</a></li>
                        <li class="personer"><a href="javascript:">Github</a></li>
                    </ul>
                </nav>
            </div>
        </header>
    </div>
    <!-- 主体 -->
    <div class="css-body">
        <div class="css-left">
            <div class="option-set">
                <!-- 1.通用设置  &#xe743;(右)||&#xe601;(下)-->
                <div class="set-currency left-box-style">
                    通用设置
                    <i class="iconfont" id="currency-dont">&#xe601;</i>
                </div>
                <!-- * or 0 -->
                <div class="font-box left-box-style">
                    <label class="currency-font left-label-style">
                        <span>栅格数等于元素数吗？</span>
                        <select class="select-font left-label-select">
                            <option value="no" class="select-tow">否</option>
                            <option value="yes" class="select-one">是</option>
                        </select>
                    </label>
                    <!-- * or 0 -->
                    <div class="gridrowcloumn left-label-style">
                        行数:<input class="childColumn input-setTow" type="number" min="1" max="999" step="1">
                        列数:<input class="childRow input-setTow" type="number" min="1" max="999" step="1">
                    </div>

                    <label class="currency-backcolor left-label-style">
                        <span>显示盒子的颜色</span>
                        <select class="select-backcolor left-label-select">
                            <option value="1" class="gree">gree</option>
                            <option value="2" class="blue">blue</option>
                        </select>
                    </label>
                </div>
                <!-- 2.栅格设置 -->
                <div class="gridstyle-lile left-box-style">
                    栅元设置
                    <i class="iconfont" id="gridlile">&#xe601;</i>
                </div>
                <!-- * or 0 -->
                <div class="gridstylelite left-box-style">
                    <label class="gaidset-box-nums left-label-style">
                        栅格数量<input  class="cantainer-nums" type="number" min="1" max="999" step="1">
                    </label>
                    <label class="gaidset-childbox-nums left-label-style" id="grid-attribute-numbers">
                        行数:<input class="childbox-rows input-setTow" type="number" min="1" max="999" step="1">
                        列数:<input class="childbox-columns input-setTow" type="number" min="1" max="999" step="1">
                    </label>
                    <label class="gaidset-childbox-nums left-label-style" id="grid-attribute-numbers">
                        元素数量<input class="childbox-nums" type="number" min="1" max="999" step="1">
                    </label>
                </div>
                <!-- 元素定位 -->
                <div class="gridstyle-attribute left-box-style">
                    元素定位
                    <i class="iconfont" id="gridarr-font">&#xe743;</i>
                </div>
                <div class="gridstyle-attribute-box left-box-style">
                    <label class="gaidset-box-nums left-label-style">
                        行位<input class="box-child-row" type="number" min="1" max="999" step="1">
                    </label>
                    <label class="gaidset-childbox-nums left-label-style" id="grid-attribute-numbers">
                        列位<input class="box-child-column" type="number" min="1" max="999" step="1">
                    </label>
                </div>
                <!-- 元素定位结束   &#xe743;  &#xe601;-->
                <div class="set-grid-style left-box-style">
                    自定义 
                    <i class="iconfont" id="gridfonts">&#xe601;</i>
                </div>
                <!-- * or 0 -->
                <div class="gridstyle-box left-box-style">
                    <!-- 栅格间距  -->
                    <label class="grid-gap-rows left-label-style">
                        行间距 <input class="rows-spacing" type="number" min="0" max="9999" step="1" value="0">
                    </label>
                    <label class="grid-gap-colomn left-label-style">
                        列间距<input class="colomn-spacing" type="number" min="0" max="9999" step="1" value="0">
                    </label>
                    <!-- 盒子设置 -->
                    <label class="gaidset-box-wight left-label-style">
                        <!-- 父元素盒子大小 -->
                        容器：宽度<input class="cantainer-width input-setSti" type="number" min="0" max="9999" step="1">
                        高度<input class="cantainer-height input-setSti" type="number" min="0" max="9999" step="1">
                    </label>
            
                    <label class="gaidset-childbox-width left-label-style">
                        元素：宽度<input class="childbox-width input-setSti" type="number" min="0" max="9999" step="1">
                        高度<input class="childbox-height input-setSti" type="number" min="0" max="9999" step="1">
                    </label>
                </div>
            </div>
        </div>
        <div class="css-right">
            <!-- 点击区域 -->
            <div class="option-click">
                <div class="option-header"></div>
                <div class="observation-box"></div>
            </div>

            <!-- 观察区域 -->
            <div class="option-checkbox">
                <textarea name="textarea" id="textarea" cols="" rows="10"></textarea>
            </div>
            <!-- 设置区域 -->
            <div class="option-setbox">
                <!-- 头 -->
                <nav class="nav-demo">
                    <ul class="demo-ul clearfix">
                        <li class="demo-course"><a class=".seeder" href="javascript:">使用教程</a></li>
                        <li class="demo-giadset"><a href="javascript:">栅格元素</a></li>
                        <li class="demo-flex"><a href="javascript:">弹性盒子</a></li>
                    </ul>
                </nav>
                <div>
                    <p>重点明确栅格数和元素的概念，栅格数是父盒子也就是栅格的行列之积，元素就是父盒子div内创建了几个子元素div。你可以通过通用设置选项来判断栅格数是否等于元素个数，默认不等于在栅元设置中你设置的栅格数盒子一定是大于你元素盒子数量的，
                        这里优点小bug但你只要大于等于你元素数量你就可以继续使用。在自定义选项中，也会有点问题，在此选项内你必须挨个设置，不然你会得到意想不到的的值，默认单位px；此网页的目的很好，就是为了方便读者的使用栅格，快速了解栅格的但是后期制作的过程中拉稀了，
                        代码没有优化，不过我有个好处就是掌握了栅格的基本用法，还有就是数据的双向绑定，期间也摸索了sass ，webpack，此文没有使用sass重写，有点费时。啰嗦完璧了，我现在太懒了以致于打错字我都不会管，格式也没有设置，就这样如果你感兴趣可以在gitee给我留言。注意：这里的元素定位留给感兴趣的同学写吧，注意事项看gitee库中的redeme.md。
                    </p>
                </div>
                <!-- 其他 -->

            </div>
        </div>
    </div>
    <script src="./dist/main.js"></script>
</body>

</html>